<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
				
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
				
            </tbody>
        </table>
    </div>

    <script>
		// 之前传递参数都是基于跳转；
		// 基于ajax 传递参数 是不跳转的；
		//注意： 使用的时候不要把跳转和 ajajx（不跳转）混在一起用；
		
	
		// 通过ajax 获取数据
		// 通过ajax获取数据 然后渲染到页面上；
		getList();
		function getList(){
			let xhr;
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject();
			}
			xhr.open("get","./getlist.php",true);
			xhr.onload = function(){  //异步的；
				// console.log(xhr.responseText);
				let data = JSON.parse(xhr.responseText);
				// console.log(data);
				renderDom(data);  // 出现删除按钮是在十几毫秒之后
				delFn();
				
			}
			xhr.send();
		}
		
		// renderDom(data);
		// console.log(data);
	
	
	
		// console.log(data);
		// 添加学生信息
		// 获取学生的信息；
		let addBtn = document.querySelector("#addBtn");
		let userEle = document.querySelector("#username");
		let genderEle = document.querySelector("#gender");
		let ageEle = document.querySelector("#age");
		let tbodyEle = document.querySelector("tbody");
		let sortEle = document.querySelector("#sortBtn");
		// 添加信息；
		addBtn.onclick = function(){
			let username = userEle.value;
			let gender = genderEle.value;
			let age = ageEle.value;
			// console.log(username,gender,age);
			// 跳转过程；
			// window.location.href = `./addStudent.php?username=${username}&gender=${gender}&age=${age}`;
			let xhr;
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject();
			}
			xhr.open("get",`./addStudent.php?username=${username}&gender=${gender}&age=${age}`,true);
			xhr.onload = function(){
				// console.log(xhr.responseText);
				// 把返还的json数据转成 对象
				let resData = JSON.parse(xhr.responseText);
				console.log(resData);
				if(resData.status==1){
					console.log("添加成功");
					getList();
				}else{
					console.log("添加失败");
				}
			}
			xhr.send();
		
		}
		
		function renderDom(data){
			tbodyEle.innerHTML = "";
			data.forEach(item=>{
				let trEle = document.createElement("tr");
				trEle.innerHTML = `<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td myid="${item.id}" class='del'>删除</td>`;
				tbodyEle.appendChild(trEle);
			})
		}
		
		// 
		
		function delFn(){
			// 删除功能;
			let delBtns = document.querySelectorAll(".del");  // 先执行获取 删除按钮的操作 ，删除还没有出现
			// 要在渲染完毕之后 ，就是删除按钮出现以后在获取删除按钮  然后再绑定点击事件
			delBtns.forEach(item=>{
				item.onclick = function(){
					console.log(1111);
					// console.log("点击了删除");
					let id  = this.getAttribute("myid");
					// console.log(id);
					// window.location.href = `delete.php?id=${id}`;
					let xhr;
					if(window.XMLHttpRequest){
						xhr = new XMLHttpRequest();
					}else{
						xhr = new ActiveXObject();
					}
					xhr.open("get",`delete.php?id=${id}`,true);
					xhr.onload = function(){
						// console.log(xhr.responseText);
						// 把返还的json数据转成 对象
						let resData = JSON.parse(xhr.responseText);
						console.log(resData);
						if(resData.status==1){
							console.log("删除成功");
							getList();  //更新数据
						}else{
							console.log("删除失败");
						}
					}
					xhr.send();
				}
			})
		}
		
		
		
		// 年龄大于25岁的人员筛选；
		sortEle.onclick = function(){
			let xhr;
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject();
			}
			xhr.open("get","./getlist.php?sort=25",true);
			xhr.onload = function(){  //异步的；
				// console.log(xhr.responseText);
				let data = JSON.parse(xhr.responseText);
				// console.log(data);
				renderDom(data);  // 出现删除按钮是在十几毫秒之后
				delFn();
				
			}
			xhr.send();
			
			// window.location.href = "index.php?sort=25";
		}
    </script>
</body>

</html>